<template>
	<view class="sign pb-40">
		<view class="sign-box">
			<view class="gray-2 text-center">已连续签到</view>
			<view class="text-center mt-30"><text style="font-size: 50rpx;margin-right: 10rpx;" class="bold">{{sumCount}}</text>
				天</view>
		</view>
		<view class="mlr-20 mt-10 radius-10 ptb-20 bg-white">
			<model-calendar :sendYear="toYear" :sendMonth="toMonth" :dataSource="signData" :totalNum="sumCount" @dateChange="getRecord">
			</model-calendar>
			<view @click="clickSign()">
				<button class="sign-btn" :disabled="status">{{!status?'立即签到':'今日已签到'}}</button>
			</view>
		</view>
		<view class='count'>
			<view class="bold">连续签到有机会领取以下奖励：</view>
			<view v-for="(item, index) in set" :key="index" class="mt-20 mb-6">连续 <text>{{ item.day }}</text>天，奖励积分<text>{{ item.coin }}</text>分；</view>
		</view>
	</view>
</template>

<script>
	import modelCalendar from '@/components/calendar.vue';
	import $api from '@/api/index.js';

	export default {
		data() {
			return {
				toYear: parseInt(new Date().getFullYear()), //本日
				toMonth: parseInt(new Date().getMonth() + 1), //本月
				sumCount: 0,
				signData: [], //["2021-01-13", "2021-01-12", "2021-01-11"]
				status: false,
				set: {},
				month: '',
			};
		},
		components: {
			modelCalendar
		},
		onLoad() {
			this.init()
			this.setSign()
		},
		methods: {
			init() {
				this.getSigninRecord()
			},
			async getSigninRecord(){
				let data = await this.$api.user.LoginBonus({
					month: this.month
				})
				if(data){
					this.signData = data.signin_record
					this.sumCount = data.count_day
					this.status = data.sign_daily
				}
			},
			async setSign(){
				let data = await this.$api.user.LoginBonus()
				if(data){
					this.set = data.bonus_list
				}
			},
			async getLoginBonus(){
				await this.$api.user.getLoginBonus()
			},
			clickSign(){
				this.getLoginBonus()
				uni.showToast({
					title: "签到成功",
					icon: 'success',
					duration: 2000
				});
				this.init()
			},
			getRecord(data) {
				this.month = data
				this.init()
			},
			//当模板的时候可以直接引入，然后触发子组件事件到父界面去控制数据

			//获取当前用户该任务的签到数组
			getData(val) {
				let y = val.split('-')[0];
				let m = val.split('-')[1];
				//this.$http.postHttp("Comment/GetRecord", {//可以通过后台接口去获取你的打卡数据
				// 	Year: y,
				// 	Month: m,
				// }, (res) => {
				//console.log(res);
				this.sumCount = 88; //res.SumCount

				if (y == this.toYear && m == this.toMonth) {
					//这是我造的假数据！！！
					let num = ["2", "3", "6", "8", "12", "15"],
						newSign = [],
						today = new Date().getDate();
					for (let i = 0; i < 6; i++) {
						if (parseInt(num[i]) > today) {
							break;
						}
						newSign.push(y + "-" + m + "-" + num[i])
					}

					//console.log(newSign);//最后传给组件的格式看这里-------------
					this.signData = newSign;
					console.log(this.signData);
				} else {
					this.signData = [];
				}
				// })
			},
		}
	}
</script>

<style lang='scss'>
	.pb-40{padding-bottom: 40px;}
	.text-center { text-align: center; }
	.bold{font-weight: bold;}
	.bg-white{background-color: #FFFFFF;}
	.mlr-20 { margin-left: 20px; margin-right: 20px; } 
	.radius-10{border-radius:10px;}
	.ptb-20{ padding-top: 20px; padding-bottom: 20px;}
	.plr-40{ padding-left: 40px; padding-right: 40px;}
	.mt-10{margin-top:10px;}
	.mt-20{margin-top:20px;}
	.mb-6{margin-bottom:6px;}
	.gray-2{
		font-weight:100;
		color:#000000;
	}
	.sign {
		background: url("/static/sign-bg.png") no-repeat top left;
		background-size: cover;
	}
	.sign-box{
		padding:180rpx 0 40rpx; 
		width: 100%;
		height: 340rpx;
		background: url(/static/sign-top.png) no-repeat center center;
		background-size: contain;
	}
	.sign-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 35rpx;
		letter-spacing: 2px;
		margin-left: 23%;
		width: 180px;
		height: 30px;
		border-radius: 10px;
		background-color: #FFA500;
	}
	.count .daynumber {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.count .daynumber .day {
		margin-top: 50rpx;
	}

	.count {
		margin: 50rpx;
		margin-top: 30rpx;
		padding: 30rpx;
		display: flex;
		/* text-align: center; */
		border-radius: 10px;
		flex-direction: column;
		background-color: #fff;
		/* justify-content: center; */
		/* align-items: center; */
	}

	.count .number {
		color: #fff;
		font-size: 60rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 20rpx;
	}

	.monthSum {
		color: red;
		font-size: 40rpx;
	}

	.count text {
		margin: 10rpx;
	}
</style>

